<template>
  <div class="banxin">
    <!-- 顶部栏 -->
    <van-nav-bar placeholder fixed class="ding">
      <template #left>
        <div class="logom"></div>
      </template>
      <template #right>
        <van-button
          type="info"
          round
          icon="search"
          color="#ABA3D8"
          class="an"
          @click="$router.push('/search')"
        >
          搜索
        </van-button>
      </template>
    </van-nav-bar>
    <!-- 标签栏 -->
    <van-tabs v-model="active" color="#ABA3D8" @click="tabsClick">
      <van-tab
        v-for="item in channels"
        :key="item.id"
        :title="item.name"
        placeholder
        class="biao"
      >
        <!-- 下拉刷新 -->
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <van-cell
              v-for="item in list"
              :key="item.art_id.toString()"
              :title="item.title"
              @click="$router.push('/article?id=' + item.art_id)"
            >
              >
              <!-- Grid -->
              <template #label>
                <van-grid :column-num="item.cover.type">
                  <van-grid-item
                    v-for="(img, index) in item.cover.images"
                    :key="index"
                  >
                    <van-image :src="img" lazy-load />
                  </van-grid-item>
                </van-grid>
                <div class="zz">
                  <span>{{ item.aut_name }}</span>
                  <span>({{ item.comm_count }})评论</span>
                  <span>{{ item.pubdate }}</span>
                </div>
              </template>
            </van-cell>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
//导包
import { gitList, getArticles } from './home.js'
export default {
  name: 'home',
  data () {
    return {
      active: 0, //tab栏
      list: [], //频道管理
      loading: false, //文章列表
      finished: false, //是否加载完毕,False:继续加载  true触底之后不会加载
      refreshing: false,
      channels: []
    }
  },
  methods: {
    /* 上拉加载更多 */
    async onLoad () {
      //1.判断有没有timestamp
      if (!this.timestamp) {
        //默认获取当前时间戳表示请求第一页
        this.timestamp = Date.now()
      }
      //2.发送请求
      let res = await getArticles({
        channel_id: this.channels[this.active].id,
        timestamp: this.timestamp
      })
      console.log(res)
      //存储服务器返回的时间戳用于请求下一页数据
      this.timestamp = res.data.data.pre_timestamp
      //添加数据
      this.list.push(...res.data.data.results)
      // console.log(res)

      //2.修改loading为false:本次加载结束
      this.loading = false

      //3.如果超过100条数据，这个时候就不再触底
      if (this.list.length >= 100) {
        this.finished = true
      }
    },
    /* 下拉刷新 : 本质其实还是执行下拉刷新请求数据逻辑 */
    onRefresh () {
      //0.一旦下拉刷新，无条件的设置finished为false(保证刷新之后可以正常上拉加载更多)
      this.finished = false
      this.timestamp = null //下拉刷新时间戳清空，从头开始加载
      //1.先清空旧数据
      this.list = []
      //2.设置上拉加载更多状态为true(开启底部加载中动画)
      this.loading = true
      //3.重新请求数据
      this.onLoad()
      //4.关闭上拉刷新动画（如果不写，上面的上拉刷新动画会一直转圈）
      this.refreshing = false
    },
    /* tab栏切换 */
    tabsClick () {
      // 1.清空列表
      this.list = []
      this.timestamp = null
      //2.设置loading状态true,开始加载
      this.loading = true
      //3.主动调用onLoad
      this.onLoad()
    }
  },
  async created () {
    let res = await gitList()
    // console.log(res)
    this.channels = res.data.data.channels
  },
  /* 过滤器 */
  filters: {
    showTime (value) {
      return moment(value).fromNow()
    }
  }
}
</script>

<style lang="less">
.banxin {
  height: 100vh;
  .van-nav-bar {
    z-index: 2;
  }
  .logom {
    width: 120px;
    height: 36px;
    background: url(~@/assets/logom.png) no-repeat;
    background-size: cover;
  }
  .ding {
    background-color: #aba3d8;
    .an {
      background-color: rgba(#fff, 0.3);
    }
  }
  .van-tabs {
    .van-tabs__wrap {
      position: fixed;
      z-index: 2;
      width: 380px;
    }
    .van-tabs__content {
      overflow-y: visible;
      height: 100%;
      .biao {
        height: 500px;
      }
    }
  }
  .van-list {
    padding-top: 39px;
  }
  .zz {
    span {
      margin-right: 10px;
    }
  }
  .van-list__placeholder {
    height: 600px;
  }
}
</style>
